import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //唯一的公共数据源,所有共享的数据统一放在state里面存储类似data
  //在vuex中state中定义的数据可以在任何组件里面使用
  // 存储数据
  state: {
    name: '柯基',
    age: '10',
    count: 0,
    arr: ['one', 'two', 'there']
  },
  //过滤state中的数据
  // 类似于vue中的commputed的属性 计算缓存,对于store的数据进行加工处理形成新的数据
  getters: {
    filterArr(state) {
      return state.arr.filter(item => item.includes("o"))
      // 过滤数据查找数据中包含o的数据
    }
  },
  //更改vuex中store中的状态唯一的方法就是提交mutations只能修改同步的代码
  // mutations事件:每个mustation都有一个字符串的事件类型和一个回调函数
  //这个回调函数就是我们实际进行状态更改的地方,并且他会接受state作为第一个参数必须接受一个state数据


  // 注意是commit触发mutation操作
  // 也就是想使用mutaion，就需要commit来触发mutaion的操作
  //同步在mutation里面使用


  mutations: {
    // 把state中的count加加
    // 第一种方法没有使用...mapMutations辅助函数
    addCount(state, num) {
      state.count += num
    },
    jjCount(state) {
      state.count--
    },

    // 第二种方法使用...mutations辅助函数
    addCounts(state, num) {
      state.count += num
    },
    jjCounts(state) {
      state.count--
    },

    // 使用actions   
    addcountA(state, num) {
      // 这里的um就是actions里面的一个方法传过来的参数
      state.count += num
    },
    addcountB(state) {
      // 这里的um就是actions里面的一个方法传过来的参数
      state.count--
    }
  },
  // 进行异步操作
  // action里面不能直接获取state里面的数据
  // 其实就是把异步的方法提交给mutation  

  //使用actions 写一个方法asyncAdd  在这个方法里面在提交一个方法(addcountA)给mutations 
  // 组件里面使用actions里面的方法就需要this.$store.dispatch(第一个参数时调用actions里面的方法,
  // 第二个参数传的参数)来调用
  actions: {
    // context可以理解为state的上一级，
    asyncAdd(context, num) {
      // 这里传的参数一般都是context固定 
      setTimeout(() => {
        context.commit("addcountA", num)
        //setTimeout是一个异步操作
        // commit就是把addcountA提交给mutations里面 num就是组件里面传的参数
      }, 1000)
    },

    asyncjj(context) {
      // 这里传的参数一般都是context固定 
      setTimeout(() => {
        context.commit("addcountB")
        //setTimeout是一个异步操作
        // commit就是把addcountB提交给mutations里面
      }, 1000)
    }
  },
  //模块
  modules: {
  }
})
